<template>
  <el-row style="margin-bottom: 20px;">
    <el-button :icon="Search" circle />
    <el-button type="primary" :icon="Plus" @click="addDoto" circle />
    <el-button type="primary" :icon="Edit" circle />
    <el-button type="success" :icon="Check" circle />
    <el-button type="danger" :icon="Delete" circle />
  </el-row>
  <el-row>
    <el-col :offset="1" :span="22">
      <el-row :gutter="20">
        <el-col v-for="doto in dotoStore.dotoList" :span="8">
          <CardVue :data="doto"></CardVue>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>
<script setup lang="ts">
import {
  Check,
  Delete,
  Edit,
  Search,
  Plus
} from '@element-plus/icons-vue'
import CardVue from "@/components/Card.vue"
import { useDotoStore } from "@/stores/dotoStore"
import { onMounted } from 'vue';
import { useRouter } from "vue-router"
const router = useRouter()
const dotoStore = useDotoStore()
// 添加doto
const addDoto = () => {
  router.push({
    name: 'addDoto'
  })
}
onMounted(() => {
  dotoStore.initDotoList()
})
</script>